<h1>
  {{title}}
</h1>
<!--<h2>
  {{hero.name}} details!
</h2>
<div>
  <label>id: </label>{{hero.id}}
</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>-->
<!--***************************************************************************-->
<h2>my heroes</h2>
<ul class="heroes">
  <!--ngFor的*前缀表示<li>及其子元素组成了一个主控模板。-->
  <!--ngFor指令在AppComponent.heroes属性返回的heroes数组上迭代，并输出此模板的实例。-->
  <!--从heroes数组中取出每个英雄存入局部变量hero-->
  <!--let 表示hero是一个模板输入变量，在模板中我们可以引用这个变量访问每个英雄的属性-->
  <li *ngFor="let hero of heroes" [class.Allselected]="hero === selectedHero" (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span>{{hero.name}}
  </li>
</ul>
<div *ngIf="selectHero">
  <h2>{{selectHero.name}}details!</h2>
  <div><label>id:</label>{{selectHero.id}}</div>
  <div>
    <label>name:</label>
    <input [(ngModel)]="selectHero.name" placeholder="name" />
  </div>
</div>
<!--***************************************************************************-->
